// pages/index/video/index.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    video_list:[],
    pageY:'',       // 触摸起始高度坐标
    animation:'',   // 视频划动动画
    up_stroke:false,// ture:上划；false：下划
    difference:'',  // 拖动的距离
    windowHeight:'',// 屏幕高度
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    // this.getIndex();
    var vs = [
      {
        vtitle:'中国几橙之乡',
        vlink:'https://aweme.snssdk.com/aweme/v1/playwm/?video_id=v0300fa60000c02l4l2cf5vja2s4t5p0&ratio=720p&line=0',
      },
      {
        vtitle:'橙子成长周期',
        vlink:'https://aweme.snssdk.com/aweme/v1/playwm/?video_id=v0200f6e0000c02l5723mgsuh1ol78l0&ratio=720p&line=0',
      },
      {
        vtitle:'酸菜鱼超好吃的做法',
        vlink:'https://aweme.snssdk.com/aweme/v1/playwm/?video_id=v0300fc30000bvb1m6acr813qppr0rfg&ratio=720p&line=0',
      },
      {
        vtitle:'炸串有多么的暴利',
        vlink:'https://aweme.snssdk.com/aweme/v1/playwm/?video_id=v0300ff20000bv5iplclcoit1h3t0sv0&ratio=720p&line=0',
      },
      {
        vtitle:'看懂了没',
        vlink:'https://aweme.snssdk.com/aweme/v1/playwm/?video_id=v0200fb10000bv2c5nqh59q2qjv3ptdg&ratio=720p&line=0',
      },
    ];
    // 赋值：屏幕高度、
    this.setData({
      windowHeight: wx.getSystemInfoSync().windowHeight,
      video_list: vs,
    })
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  },

  //返回
  toBack: function () {
    console.log('返回');
    wx.showToast({
      title: '即将返回。。', icon: 'none'
    })
    wx.switchTab({
      url: '/pages/index/index'
    })
  },
  // //获取视频列表
  // getIndex: function () {
  //   var vs = [
  //     {
  //       cover:'https://p3.douyinpic.com/img/tos-cn-p-0015/2575d3129dea4f1b8576beb4ff7220f5~c5_300x400.jpeg?from=2563711402_large',
  //       link:'https://aweme.snssdk.com/aweme/v1/playwm/?video_id=v0300fa60000c02l4l2cf5vja2s4t5p0&ratio=720p&line=0',
  //     },
  //     {
  //       cover:'https://p26.douyinpic.com/img/tos-cn-p-0015/c36cbf29474d4f378584608def8d6a3f~c5_300x400.jpeg?from=2563711402_large',
  //       link:'https://aweme.snssdk.com/aweme/v1/playwm/?video_id=v0200f6e0000c02l5723mgsuh1ol78l0&ratio=720p&line=0',
  //     }
  //   ];
  //   var that = this;
  //   wx.getSystemInfo({ //获取系统信息
  //     success (res) {
  //       that.setData({
  //         vw: res.screenWidth/2-2,
  //         vh: res.screenHeight/2-2,
  //         lists: vs,
  //       });
  //     }
  //   });
  // },

  // 划动起始坐标方法
  touchStart(e){
    // 开始坐标
    this.setData({
      pageY:e.touches[0].pageY,
    })
  },
  // 划动过程坐标方法
  touchMove(e){
    let n = e.currentTarget.dataset.index;     // 触摸的第几个序号
    let difference = e.touches[0].pageY - this.data.pageY; // 移动后和起始值的差值
    if(this.is_continue(n,difference)){        // 判断是否到底
      return;
    } 
    // 划动动画 -------------------------------------
    var animation = wx.createAnimation({       // 移动动效
      duration: 0,
    });
    animation.top(difference - (n*this.data.windowHeight)).step()
    this.setData({
      animation:  animation.export(),          // 动画
      up_stroke:difference > 0 ? false : true, // 是否上划,
      difference:difference,                   // 拖动的距离
    })
  },
  // 划动结束坐标方法
  touchEnd(e){
    let n = e.currentTarget.dataset.index;
    let difference = this.data.difference;  // 拖动的距离
    if(this.is_continue(n,difference)){
      return;
    }
    const windowHeight = this.data.windowHeight;      // 屏幕高度
    let that = this;
    // 根据id获取点击元素距顶部高度
    var query = wx.createSelectorQuery();
    let id = '#' + e.currentTarget.id;
    query.select(id).boundingClientRect(function (rect) { // 获取高度
      if(Math.abs(difference) <= windowHeight /7){      // 小于1/7回原位置 ---------------------------
        var animation = wx.createAnimation({  // 移动动效
          duration: 100,
        });
        animation.top(-(n * windowHeight)).step()
        that.setData({
          animation:  animation.export(),
          up_stroke:false,  // 重置划动状态
          difference:0,     // 重置划动距离
        })
      }else{  // 大于1/4，移至拖动的下一个视频 --------------------------------
        var animation = wx.createAnimation({ // 移动动效
          duration: 200,
        });
        that.data.up_stroke ? n++ : n--;     // 上划：n+1  下划：n-1
        animation.top(-(n * windowHeight)).step()
        that.setData({
          animation:  animation.export(),
          up_stroke:false,  // 重置划动状态
          difference:0,     // 重置划动距离
        })
      }
    }).exec();
  },
  // 判断是否到底
  is_continue(n,difference){
    if(difference < 0){ // 上划
      if(n == this.data.video_list.length - 1){ // 最后一个视频，提示到底
        if(difference < -20){
          wx.showToast({
            title: '已经到底了~~',
            icon:'none',
            duration:1000
          })
        }
        return true;
      }
    }else{
      if(n == 0){
        if(difference > 20){
          wx.showToast({
            title: '上面没有了~~',
            icon:'none',
            duration:1000
          })
        }
        return true;
      }
    }
  },
  //去接入
  toCart: function (e) {
    wx.showToast({
      title: '即将。。', icon: 'none'
    })
    // wx.navigateTo({
    //   url: '/pages/index/video/index?cate='+cateId,
    // })
  },
  //去接入
  toPlay: function (e) {
    wx.showToast({
      title: '即将。。', icon: 'none'
    })
    // wx.navigateTo({
    //   url: '/pages/index/video/index?cate='+cateId,
    // })
  },
  //去接入
  toZan: function (e) {
    wx.showToast({
      title: '即将。。', icon: 'none'
    })
    // wx.navigateTo({
    //   url: '/pages/index/video/index?cate='+cateId,
    // })
  },
})